<template>
	<view class="w-670">
		<scroll-view scroll-y="true">
			<view>
				<view class="pt-48" v-for="i in fed" :key='i.list[0].code'>
					<text class="section" @tap="pullList">{{i.name}}</text>
					<view class="s-body pt-20" v-for="l in i.list" :key="l.code">
						<text class="s-title fs-32 color-47 ">{{l.type}}</text>
						<view class="flex justify-between pt-12 align-center">
							<view class="basis-df color-47">
								<view class="fs-24">{{l.code}}</view>
								<view class="fs-24">基金代码</view>
							</view>
							<view class="basis-df flex justify-around">
								<view class="basis-df">
									<view class="fs-40 text-bold color-f3" :class="[l.pre>=0?'color-f3':'color-0a']">
										{{l.pre}}%
									</view>
									<view class="fs-24 color-47">近一月收益</view>
								</view>
								<navigator :url="'/pagesA/t-fundDetail/t-fundDetail?code='+l.code">
									<view class="basis-df cu-tag round bg-blue fs-24">立即购买</view>
								</navigator>
							</view>
						</view>
					</view>
				</view>
				<view class="text-center color-99 fs-24 pt-48" @tap="getMore">加载更多...</view>


			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		createNamespacedHelpers
	} from 'vuex';
	const {
		mapActions,
		mapState
	} = createNamespacedHelpers('product')
	export default {
		data() {
			return {
				pageNum:1,
				arr: [{
						name: '热销选基',
						list: [{
								type: '易方达上证50指数A',
								code: '110003',
								pre: -9.83
							},
							{
								type: '易方达上证50指数A',
								code: '810443',
								pre: 2.83
							},
							{
								type: '易方达上证50指数A',
								code: '630503',
								pre: -3.83
							},
							{
								type: '易方达上证50指数A',
								code: '720401',
								pre: 3.23
							},
						]
					},
					{
						name: '指数选基',
						list: [{
								type: '华宝沪深300指数增强A',
								code: '003876',
								pre: 8.83
							},
							{
								type: '华宝沪深300指数增强A',
								code: '703876',
								pre: 2.83
							},
							{
								type: '华宝沪深300指数增强A',
								code: '503876',
								pre: 0.83
							},
						]

					}
				]
			}
		},
		computed: {
			...mapState(['fed']),
		},
		methods: {
			...mapActions(['getFundEt']),
			
			// 点击加载更多
			getMore() {
				this.pageNum++
				this.getFundEt(this.pageNum)
			},


			
		},
		
		onLoad() {
			this.getFundEt({pageNum:this.pageNum})
			
		},

		// 触底函数加载更多生命周期函数
		onReachBottom() {
			this.pageNum++
			this.getFundEt(this.pageNum)
		}
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}
</style>

<style scoped lang="scss">
	.fs-40 {
		font-size: 40rpx;
	}

	.color-f3 {
		color: #FF3A3A;
	}

	.color-0a {
		color: #00A200;
	}

	.pt-12 {
		padding-top: 12rpx;
	}

	.pt-48 {
		padding-top: 48rpx;
	}

	.pt-20 {
		padding-top: 20rpx;
	}

	.section {
		font-size: 32rpx;
		font-weight: bold;
		color: #323232;

	}
</style>
